<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssSeven</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .clearfix::before,
  .clearfix::after{
    content: '';
    display: table;
  }
  .clearfix::after{
    clear: both;
  }
  li{
    display: inline-block;
  }
  .father li{
    position: relative;
  }
  .father li .hot{
    position: absolute;
    top: 0;
    right: 0;
  }
  .hot1{
    position: absolute;
    top: 0;
    left: 100px;
  }
  .boxOne{
    position: relative;
    background-color: orange;
    width: 300px;
    height: 300px;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
  }
  .boxTwo{
    position: absolute;
    background-color: deepskyblue;
    width: 100px;
    height: 100px;
    right: 20px;
    left: 50%;
    margin-left: -50px;
    bottom: 50%;
    top: 50%;
    /*margin-top: -50px;*/
  }
</style>
<body>
<div>定位:position</div>
<div>1.静态定位 static(没有作用)</div>
<div>2.相对定位 relative(是相对于原来的位置进行定位，用于父标签;它原来的位置是还存在的(没有脱标)</div>
<div>3.绝对定位 absolute(是相对于父级标签或浏览器的位置进行定位,用于字标签;
  它原来的位置不存在的(脱标),如果子标签没有找到父标签的定位那么就一直往上找，如果都没有找到就会把浏览器作为父标签进行定位)</div>
<div class="clearfix">
  <ul class="father">
    <li>
      <img src="bg1.png">
      <img src="two.png" class="hot">
    </li>
    <li>
      <img src="bg2.png">
      <img src="one.png" class="hot">
    </li>
  </ul>
</div>
<img src="one.png" class="hot1"><!--这个是没有找到父级标签的定位，所以会直接把浏览器作为父级来定位-->


<div>定位移动:left>right,top>bottom</div>
<div>left和right属性只会执行其中的一个，如果两个都有那么就会执行left。
     top和bottom属性只会执行其中的一个，如果两个都有那么就会执行top。
</div>
<div class="boxOne">
  <div class="boxTwo"></div>
</div>

</body>
</html>
